<template>
    <div class="panel-tab__content">
        <div class="panel-tab__content--title">
            <span
                ><i
                    class="el-icon-menu"
                    style="margin-right: 8px; color: #555555"
                ></i
                >消息列表</span
            >
            <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="openModel('message')"
                >创建新消息</el-button
            >
        </div>
        <base-table
            ref="messageTable"
            :tableData="messageTableConfig.tableData"
            :tableHeader="messageTableConfig.tableHeader"
            :tableConfig="messageTableConfig.tableConfig"
        />
        <div
            class="panel-tab__content--title"
            style=" margin-top: 8px;padding-top: 8px; border-top: 1px solid #eeeeee"
        >
            <span
                ><i
                    class="el-icon-menu"
                    style="margin-right: 8px; color: #555555"
                ></i
                >信号列表</span
            >
            <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="openModel('signal')"
                >创建新信号</el-button
            >
        </div>
        <base-table
            ref="signalTable"
            :tableData="signalTableConfig.tableData"
            :tableHeader="signalTableConfig.tableHeader"
            :tableConfig="signalTableConfig.tableConfig"
        />
        <el-dialog
            :visible.sync="dialogConfig.show"
            :title="dialogConfig.title"
            :close-on-click-modal="false"
            :width="dialogConfig.width"
            append-to-body
            destroy-on-close
        >
            <base-form
                :formItems="modelObjectForm.formItems"
                :formData="modelObjectForm.formSubmit"
                :formConfig="modelObjectForm.formConfig"
                :formRules="modelObjectForm.formRule"
                ref="modelObjectForm"
            />
            <template slot="footer">
                <el-button size="mini" @click="dialogConfig.show = false"
                    >取 消</el-button
                >
                <el-button size="mini" type="primary" @click="addNewObject"
                    >保 存</el-button
                >
            </template>
        </el-dialog>
    </div>
</template>
<script>
import BaseTable from '@/components/baseTable/index'
import BaseForm from '@/components/baseForm/index'
import { setFormItemProp } from '@/utils/tool'
export default {
    components: {
        BaseTable,
        BaseForm
    },
    name: 'SignalAndMassage',
    data() {
        return {
            // 消息表格配置
            messageTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'id',
                        label: '消息ID',
                        visible: true,
                        showOverflowTooltip: true
                    },
                    {
                        prop: 'name',
                        label: '消息名称',
                        visible: true,
                        showOverflowTooltip: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    border: true,
                    size: 'mini',
                    height: 'auto'
                }
            },
            // 信号表格配置
            signalTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        prop: 'id',
                        label: '信号ID',
                        visible: true,
                        showOverflowTooltip: true
                    },
                    {
                        prop: 'name',
                        label: '信号名称',
                        visible: true,
                        showOverflowTooltip: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    border: true,
                    size: 'mini',
                    height: 'auto'
                }
            },
            // 弹框配置
            dialogConfig: {
                // 弹框标题
                title: '新增',
                // 是否显示
                show: false,
                // 宽度
                width: '400px',
                // 弹框标识(用来区分弹框内容)
                key: ''
            },
            // 表单配置
            modelObjectForm: {
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入ID',
                            label: 'ID',
                            prop: 'id',
                            width: 'w-1',
                            isShow: true,
                            clearable: true
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入名称',
                            label: '名称',
                            prop: 'name',
                            width: 'w-1',
                            isShow: true,
                            clearable: true
                        }
                    ]
                ],
                formSubmit: {
                    id: '',
                    name: ''
                },
                formConfig: {
                    labelPosition: 'left', // label对齐方式
                    labelWidth: '80px',
                    size: 'mini'
                }
            }
        }
    },
    mounted() {
        this.initDataList()
    },
    methods: {
        initDataList() {
            this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements
            this.messageIdMap = {}
            this.signalIdMap = {}
            this.messageTableConfig.tableData = []
            this.signalTableConfig.tableData = []
            this.rootElements.forEach(el => {
                if (el.$type === 'bpmn:Message') {
                    this.messageIdMap[el.id] = true
                    this.messageTableConfig.tableData.push({ ...el })
                }
                if (el.$type === 'bpmn:Signal') {
                    this.signalIdMap[el.id] = true
                    this.signalTableConfig.tableData.push({ ...el })
                }
            })
        },
        openModel(type) {
            if (type === 'message') {
                this.dialogConfig.title = '创建消息'
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'id',
                    'label',
                    '消息ID'
                )
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'id',
                    'placeholder',
                    '请输入消息ID'
                )
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'name',
                    'label',
                    '消息名称'
                )
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'name',
                    'placeholder',
                    '请输入消息名称'
                )
            } else {
                this.dialogConfig.title = '创建信号'
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'id',
                    'label',
                    '信号ID'
                )
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'id',
                    'placeholder',
                    '请输入信号ID'
                )
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'name',
                    'label',
                    '信号名称'
                )
                setFormItemProp(
                    this.modelObjectForm.formItems,
                    'name',
                    'placeholder',
                    '请输入信号名称'
                )
            }
            this.dialogConfig.show = true
            this.dialogConfig.key = type
            if (this.$refs['modelObjectForm']) {
                this.$refs['modelObjectForm'].resetForm()
            }
        },
        addNewObject() {
            console.log(
                'this.modelObjectForm.formSubmit',
                this.modelObjectForm.formSubmit
            )
            if (this.dialogConfig.key === 'message') {
                if (this.messageIdMap[this.modelObjectForm.formSubmit.id]) {
                    return this.$message.error(
                        '该消息已存在，请修改id后重新保存'
                    )
                }
                const messageRef = window.bpmnInstances.moddle.create(
                    'bpmn:Message',
                    this.modelObjectForm.formSubmit
                )
                this.rootElements.push(messageRef)
            } else {
                if (this.signalIdMap[this.modelObjectForm.formSubmit.id]) {
                    return this.$message.error(
                        '该信号已存在，请修改id后重新保存'
                    )
                }
                const signalRef = window.bpmnInstances.moddle.create(
                    'bpmn:Signal',
                    this.modelObjectForm.formSubmit
                )
                this.rootElements.push(signalRef)
            }
            this.dialogConfig.show = false
            this.initDataList()
        }
    }
}
</script>
